<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="description" content="product">
    <meta name="author" content="https://gitee.com/PirateFlag">
    <link rel="icon" href="../../../../favicon.ico">

    <title>产品介绍</title>

     <!--Bootstrap core CSS-->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

     <!--Custom CSS,目前没有使用到，计划用于微调位置-->
     <link rel="stylesheet" href="product.css">

  </head>
  <body>

    <header>

      <nav class="navbar bg-light site-header sticky-top py-1 ">

        <div class="container d-flex flex-column flex-md-row jutify-content-between">
          <a class="py-2" href="#">
            <!--一个复杂的svg图片加上神奇的line划线-->
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto">
                <circle cx="12" cy="12" r="10"></circle>
                  <line x1="14.31" y1="8" x2="20.05" y2="17.94">
                  </line>
                  <line x1="9.69" y1="8" x2="21.17" y2="8">
                  </line>
                  <line x1="7.38" y1="12" x2="13.12" y2="2.06">
                  </line>
                  <line x1="9.69" y1="16" x2="3.95" y2="6.06">
                  </line>
                  <line x1="14.31" y1="16" x2="2.83" y2="16">
                  </line>
                  <line x1="16.62" y1="12" x2="10.88" y2="21.94">
                  </line>
              </svg>
          </a>
          <a class="py-2 d-none d-md-inline-block" href="#">Computer</a>
          <a class="py-2 d-none d-md-inline-block" href="#">Pad</a>
          <a class="py-2 d-none d-md-inline-block" href="#">Phone</a>
          <a class="py-2 d-none d-md-inline-block" href="#">Watch</a>
          <a class="py-2 d-none d-md-inline-block" href="#">Music</a>
          <a class="py-2 d-none d-md-inline-block" href="#">技术支持</a>
          <a class="py-2 d-none d-md-inline-block" href="#">搜索更多</a>
          <a class="py-2 d-none d-md-inline-block" href="#">购物车</a>
        </div>
      </nav>
    </header>

    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
      <div class="col-md-6 p-lg-5 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">以旧换新买Phone仅183/月起,或4399起<sup>*</sup></h1>
        <p class="lead font-weight-normal">前往store零售店,你将现有的Phone升级换购成New PhoneXR,时机正好</p>
        <a class="btn btn-outline-primary">进一步了解</a>
      </div>
      <div class="product-device box-shadow d-none d-md-block"></div>
      <div class="product-device product-device-2 boxshadow d-none d-md-block"></div>
    </div>
    
    <div class="d-md-flex flex-md-equal">

    </div>




    <main></main>
    <footer></footer>

    <!--Jquery的CDN依赖-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!--popper的CDN依赖-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <!--bootstrap的CDN依赖-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>
</html>